<template>
  <div class="w-full">
    <div>
      <breadcrumb parentName="批单管理" childrenName="保单批改"></breadcrumb>
    </div>
    <div class="w-full bg-white px-[25px] py-[20px] mt-[30px]">
      <div class="flex items-center">
        <div class="w-[4px] h-[16px] bg-[#EF6800]"></div>
        <div class="ml-[10px]">批单详情</div>
      </div>
      <div class="flex flex-wrap mt-[20px] text-[16px]">
        <div class="flex w-[40%]">
          <div class="min-w-[100px]">申请单号:</div>
          <div class="ml-[80px]">
            {{ Info.request_no }}
          </div>
        </div>
        <div class="flex w-[40%]">
          <div class="min-w-[100px]">批单号:</div>
          <div class="ml-[80px]">
            {{ Info.endorse_no }}
          </div>
        </div>
        <div class="flex w-[40%] mt-[20px]">
          <div class="min-w-[100px]">生效日期:</div>
          <div class="ml-[80px]">
            {{ Info.create_time }}
          </div>
        </div>

        <div class="flex w-[40%] mt-[20px]">
          <div class="min-w-[100px]">批改类型:</div>
          <div class="ml-[80px]">
            <span v-show="Info.type == 1">批增被保人</span>
            <span v-show="Info.type == 2">批改投保人</span>
            <span v-show="Info.type == 3">批改被保人</span>
            <span v-show="Info.type == 4">批减被保人</span>
            <span v-show="Info.type == 5">批改工程信息</span>
            <span v-show="Info.type == 6">批改地址信息</span>
            <span v-show="Info.type == 7">批改特约</span>
          </div>
        </div>

        <div class="flex w-[40%] mt-[20px]">
          <div class="min-w-[100px]">保单下载:</div>
          <div class="ml-[80px] text-blue-500 cursor-pointer">
            <span @click="download">下载保单</span>
          </div>
        </div>
      </div>
      <div class="flex items-center mt-[40px]">
        <div class="w-[4px] h-[16px] bg-[#EF6800]"></div>
        <div class="ml-[10px]">批单记录</div>
      </div>
      <!-- 批改投保人 -->
      <div class="mt-[20px]" v-show="Info.type == 2">
        <div class="w-full border-b border-[#ECECEC]">
          <div class="text-[14px] text-[#EF6800] pb-[8px]">
            <text class="border-b border-[#EF6800] pb-[10px]">批改投保人</text>
          </div>
        </div>
        <div class="mt-[20px] w-full text-[14px] border border-[#ECECEC]">
          <div
            class="flex justify-around w-full h-[40px] items-center"
            style="background: rgba(239, 104, 0, 0.1)"
          >
            <div class="flex-1 text-center">投保类型</div>
            <div class="flex-1 text-center">姓名</div>
            <div class="flex-1 text-center">身份证号</div>
            <div class="flex-1 text-center">批改时间</div>
          </div>
          <div class="flex justify-around w-full h-[40px] items-center">
            <div class="flex-1 text-center">{{ Info.insure_type }}</div>
            <div class="flex-1 text-center">{{ Info.name }}</div>
            <div class="flex-1 text-center">{{ Info.card_no }}</div>
            <div class="flex-1 text-center">{{ Info.create_time }}</div>
          </div>
        </div>
      </div>
      <!-- 批增被保人/批减/批改 -->
      <div class="mt-[20px]" v-show="Info.type == 1 || Info.type == 3 || Info.type == 4">
        <div class="w-full border-b border-[#ECECEC]">
          <div class="text-[14px] text-[#EF6800] pb-[8px]">
            <text class="border-b border-[#EF6800] pb-[10px]">
              <span v-show="Info.type == 1">批增被保人</span>
              <span v-show="Info.type == 3">批改被保人</span>
              <span v-show="Info.type == 4">批减被保人</span>
            </text>
          </div>
        </div>
        <div class="mt-[20px] w-full text-[14px] border border-[#ECECEC]">
          <div
            class="flex justify-around w-full h-[40px] items-center"
            style="background: rgba(239, 104, 0, 0.1)"
          >
            <div class="flex-1 text-center">被保类型</div>
            <div class="flex-1 text-center">姓名</div>
            <div class="flex-1 text-center">证件号码</div>
            <div class="flex-1 text-center">批改时间</div>
          </div>
          <div class="flex justify-around w-full h-[40px] items-center">
            <div class="flex-1 text-center">{{ Info.insure_type }}</div>
            <div class="flex-1 text-center">{{ Info.name }}</div>
            <div class="flex-1 text-center">{{ Info.card_no }}</div>
            <div class="flex-1 text-center">{{ Info.create_time }}</div>
          </div>
        </div>
      </div>
      <!-- 批改工程信息 -->
      <div class="mt-[20px]" v-show="Info.type == 5">
        <div class="w-full border-b border-[#ECECEC]">
          <div class="text-[14px] text-[#EF6800] pb-[8px]">
            <text class="border-b border-[#EF6800] pb-[10px]">批改工程信息</text>
          </div>
        </div>
        <div class="mt-[20px] w-full text-[14px] border border-[#ECECEC]">
          <div
            class="flex justify-around w-full h-[40px] items-center"
            style="background: rgba(239, 104, 0, 0.1)"
          >
            <div class="flex-1 text-center">工程造价</div>
            <div class="flex-1 text-center">工程名称</div>
            <div class="flex-1 text-center">工程地址</div>
            <div class="flex-1 text-center">施工详细地址</div>
            <div class="flex-1 text-center">活动类型</div>
            <div class="flex-1 text-center">批改时间</div>
          </div>
          <div class="flex justify-around w-full h-[40px] items-center">
            <div class="flex-1 text-center">{{ Info.price }}</div>
            <div class="flex-1 text-center">{{ Info.name }}</div>
            <div class="flex-1 text-center">
              {{ Info.province + "-" + Info.city + "-" + Info.area }}
            </div>
            <div class="flex-1 text-center">{{ Info.address }}</div>
            <div class="flex-1 text-center">{{ Info.active_type }}</div>
            <div class="flex-1 text-center">{{ Info.create_time }}</div>
          </div>
        </div>
      </div>
      <!-- 批改地址信息 -->
      <div class="mt-[20px]" v-show="Info.type == 6">
        <div class="w-full border-b border-[#ECECEC]">
          <div class="text-[14px] text-[#EF6800] pb-[8px]">
            <text class="border-b border-[#EF6800] pb-[10px]">批改地址信息</text>
          </div>
        </div>
        <div class="mt-[20px] w-full text-[14px] border border-[#ECECEC]">
          <div
            class="flex justify-around w-full h-[40px] items-center"
            style="background: rgba(239, 104, 0, 0.1)"
          >
            <div class="flex-1 text-center">工程地址</div>
            <div class="flex-1 text-center">详细地址</div>
            <div class="flex-1 text-center">店铺号</div>
            <div class="flex-1 text-center">批改时间</div>
          </div>
          <div class="flex justify-around w-full h-[40px] items-center">
            <div class="flex-1 text-center">
              {{ Info.province + "-" + Info.city + "-" + Info.area }}
            </div>
            <div class="flex-1 text-center">{{ Info.address }}</div>
            <div class="flex-1 text-center">{{ Info.room_no }}</div>
            <div class="flex-1 text-center">{{ Info.create_time }}</div>
          </div>
        </div>
      </div>
      <!-- 批改特约 -->
      <div class="mt-[20px]" v-show="Info.type == 7">
        <div class="w-full border-b border-[#ECECEC]">
          <div class="text-[14px] text-[#EF6800] pb-[8px]">
            <text class="border-b border-[#EF6800] pb-[10px]">批改特约</text>
          </div>
        </div>
        <div
          class="mt-[20px] w-full text-[14px] border border-[#ECECEC] min-h-[133px] p-[20px]"
        >
          <div>{{ Info.special_clause }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import breadcrumb from "@/components/breadcrumb/breadcrumb.vue";
import { ref, reactive, onMounted, computed, inject } from "vue";
import { pdGetInfo } from "@/utils/api";
import { useRoute } from "vue-router";
import router from "@/router";
const form = reactive({
  name: "",
});
const route = useRoute();
const message = inject("message") as any;
const Info = reactive({
  special_clause: "",
  type: "", //1批增被保人 2批改投保人 3批改被保人 4批减被保人 5批改工程信息 6批改地址信息 7批改特约
  bd_no: "",
  create_time: "",
  endorse_no: "", ////批单号
  request_no: "", //申请单号
  address: "",
  area: "",
  city: "",
  name: "",
  province: "",
  room_no: "",
  price: "",
  active_type: "",
  card_no: "",
  card_type: "",
  insure_type: "",
  order_id: "",
  bx_id: "",
}) as any;
const id = computed({
  get: () => {
    return route.query.id;
  },
  set: () => {
    return;
  },
});
onMounted(() => {
  getData();
});
const getData = async () => {
  const res = await pdGetInfo({ id: id.value });

  if (res.code == 0) {
    message.warning(res.msg);
    return;
  }
  for (let i in Info) {
    if (res.msg[i] != undefined || res.msg[i] != "") {
      Info[i] = res.msg[i];
    }
  }
};
//下载保单
const download = () => {
  router.push(`/index/order/detail?order_id=${Info.order_id}&id=${Info.bx_id}`);
};
</script>
<style scoped lang="scss"></style>
